<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="d3.js"></script>
    
    <style>
        body{
            margin: 0;
        }
       
    </style>
</head>
<body>
     <svg width="512" height="512"></svg>
    <svg width="512" height="512"></svg>
    <script>
//        var nodeGenerator = function() {
//            var r = function(d) {
//                return d.radius;
//            },
//            x = function(d) {
//                return d.x;
//            },
//            y = function(d) {
//                return d.y;
//            };
//            
//            
//            function circle(d) {
//                var cx = d3.function(x).call(this, d),
//                    cy = d3.function(y).call(this, d),
//                    myr = d3.function(r).call(this, d);
//                
//            }
//        };
//        
//        
//        var svg = d3.select("svg").selectAll("circle")
//            .data([1, 2, 3, 4])
//            .enter()
//            .append("circle")
//            .attr("fill", "blue")
//            .attr("cx", function(d, i) {
//                return (i + 1) * 50 + "px";
//            })
//            .attr("cy", function(d, i) {
//                return "100px";
//            })
//            .attr("r", 20);
        
        function circleGen() {
              //set defaults
              var r = function(d) { return d.radius; },
                  x = function(d) { return d.x; },
                  y = function(d) { return d.y; };

              //returned function to generate circle path
              function circle(d) {
                var cx = d3.functor(x).call(this, d),
                    cy = d3.functor(y).call(this, d),
                    myr = d3.functor(r).call(this, d);
                  
                

                return "M" + cx + "," + cy + " " +
                       "m" + -myr + ", 0 " +
                       "a" + myr + "," + myr + " 0 1,0 " + myr*2  + ",0 " +
                       "a" + myr + "," + myr + " 0 1,0 " + -myr*2 + ",0Z";
                   
              }

              //getter-setter methods
              circle.r = function(value) {
                if (value) {r = value; return circle;} return r; 
              };  
              circle.x = function(value) {
                  if (value) {x = value; return circle;} return x; 
              };  
              circle.y = function(value) {
                  if (value) {y = value; return circle;} return y; 
              };

              return circle;
        }
        
var myC = circleGen()
   .x(function(d) { return d.x; })
   .y(function(d) { return d.y; })
   .r(function(d) { return d.r; });

var data = [
  {x: 150, y: 100, r: 10, fill: "green", text1: "text1"},
  {x: 200, y: 150, r: 5, fill: "red", text1: "text1111"},
  {x: 100, y: 250, r: 25, fill: "blue", text1: "text222222221"}
];
var svg = d3.select("svg");
        
svg.selectAll("path.circle")
    .data(data)
  .enter()
    .append("path")
    .attr("d", myC)
    .attr("fill", function(d) {return d.fill;});
    </script>
</body>
</html>




<!--http://stackoverflow.com/questions/27042222/create-custom-a-d3-generator-->